<template>
    <div id="user">
        <div class="header">
            <div class="page-title">用户列表</div>
            <el-input placeholder="请输入内容，按Enter键搜索..." suffix-icon="el-icon-search" v-model="text"
                @keyup.enter="search">
            </el-input>
        </div>

        <el-table :data="tableData" class="m-t-5">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="wxname" label="微信名" width="150"></el-table-column>
            <el-table-column prop="wx" label="微信" width="270"></el-table-column>
            <el-table-column label="头像" width="120" class="t-c">
                <template #default="v">
                    <el-image :src="v.row.wximage" fit="cover"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column label="电话" width="150">
                <template #default="v">
                    <div v-if="v.row.tel">
                        <i class="el-icon-phone"></i> {{v.row.tel}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址" width="200"></el-table-column>
            <el-table-column prop="time" :formatter="dateFormat" label="注册时间" width="200"></el-table-column>
            <el-table-column min-width="200"></el-table-column>
        </el-table>
        <el-pagination background hide-on-single-page layout="prev, pager, next" :total="total" :current-page="current"
            @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script>
    import {
        get
    } from '@/network/request'
    import moment from 'moment'

    export default {
        name: 'User',
        data() {
            return {
                tableData: [],
                total: 0,
                current: 1,
                text: '' // 搜索内容
            }
        },
        mounted() {
            this.$nextTick(() => {
                // 获取信息
                get('/user', {
                    page: this.current
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            })
        },
        methods: {
            // 时间格式化
            dateFormat(row, column, time) {
                return moment.unix(time).format("YYYY-MM-DD HH:mm:ss")
            },
            // 分页
            changePage(page) {
                get('/user', {
                    page
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            },
            // 搜索
            search() {
                get('/searchUser', {
                    text: this.text
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.tableData = result.data.data
                        this.total = result.data.total
                        this.current = result.data.current
                    }
                }).catch()
            }
        }
    }
</script>

<style>
</style>